<template>
  <el-dialog
    v-model="dialogVisible"
    title="请选择相关人员信息"
    width="50%"
    draggable
    @close="close"
  >
    <el-table
      ref="singleTableRef"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
      @current-change="handleCurrentChange"
    >
      <el-table-column type="index" width="70" label="序号" align="center"/>
      <el-table-column property="name" label="姓名" show-overflow-tooltip align="center"/>
      <el-table-column property="phoneNumber" label="手机号码" show-overflow-tooltip align="center"/>
      <el-table-column property="idNumber" label="身份证号" show-overflow-tooltip align="center"/>
      <el-table-column property="town" label="乡镇" show-overflow-tooltip align="center"/>
      <el-table-column property="village" label="村" show-overflow-tooltip align="center"/>
      <el-table-column property="address" label="地址" show-overflow-tooltip align="center"/>
    </el-table>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="confirm">
            确认
          </el-button>
        </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "userClick",
  props:{
    visible:{
      type:Boolean,
      default:false
    },
    data:{
      type:Array,
      default:()=>[]
    }
  },
  data(){
    return{
      dialogVisible:false,
      tableData:[],
      idNumber:''
    }
  },
  watch:{
    visible:{
      immediate:true,
      deep:true,
      handler:function(val){
        console.log('this.data',this.data)
        this.tableData=this.data
        setTimeout(()=>{
          this.dialogVisible=val
        },500)
      }
    }
  },
  methods:{
    close(){
      this.$emit('close')
    },
    confirm(){
      this.$emit('confirm',this.idNumber)
    },
    handleCurrentChange(val){
      console.log('val',val)
      this.idNumber=val.idNumber
    }
  }
};
</script>

<style>
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
  background-color: #d0d9e3 !important
}
</style>
